<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.45/vue.global.min.js"></script>
    <link rel="stylesheet" href="../css.css/css.css">
    <title>Document</title>
</head>
<body>
    <div id="App">
        <div class="card">
            <h3>学生成绩填报表</h3>
            <div class="content">
                <div class="item">姓名: <input type="text" v-model="newStu.name"/></div>
                <div class="item">性别: <input type="text" v-model="newStu.sex"/></div>
                <div class="item">年龄: <input type="number" v-model="newStu.age"/></div>
                <div class="item">语文: <input type="number" v-model="newStu.Chinese"/></div>
                <div class="item">数学: <input type="number" v-model="newStu.Math"/></div>
                <div class="item">英语: <input type="number" v-model="newStu.English"/></div>
                <div class="item"> <input type="button" class="btn" value="提交" @click="sumbit"/></div>
            </div>
        </div>
        <div v-for="item in student" class="head-v">
            <div class="infor">
                <!-- <img src="../img/512.jpeg"> -->
                <div class="pic"></div>
                <span>姓名:&nbsp&nbsp&nbsp{{item.name}}</span>
                <span>年龄:&nbsp&nbsp&nbsp{{item.age}}</span> 
                <span>性别:&nbsp&nbsp&nbsp{{item.sex}}</span>
                <span>总分:&nbsp&nbsp&nbsp{{item.Chinese + item.Math + item.English}}</span>
            </div>
            <div v-if="(item.Chinese >= 60) & (item.Math >= 60) & (item.English >= 60)" class="detail-v">
                <span class="zi">语文:&nbsp;&nbsp&nbsp{{item.Chinese}}</span>
                <span>数学:&nbsp&nbsp&nbsp{{item.Math}}</span> 
                <span>英语:&nbsp&nbsp&nbsp{{item.English}}</span>
            </div>
        </div>
    </div>

<script>
        const Counter = {
            data() {
                return {
                    newStu: { name: '', age: 0, sex: '', head: '', Chinese: 0, Math: 0, English: 0, show: false},
                    student: [
                        { name: "张三", age: 20, sex: "男", Chinese:60, Math:100, English:70},
                        { name: "李四", age: 20, sex: "男", Chinese:60, Math:90, English:40},
                        { name: "王五", age: 20, sex: "男", Chinese:60, Math:100, English:80}
                    ]
                }
            },methods: {
                sumbit() {
                    if ((this.newStu.name === '' | (!this.newStu.sex === ''))) {
                        alert('请填写完整!')
                        return
                    }
                    this.student.push(this.newStu)
                }
            }
        }
    
    Vue.createApp(Counter).mount('#App')
</script>
</body>
</html>